<template>
    <div>
        <!--  轮播图 -->
        <div class="swiper-container" style="height: 500px">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-color: pink">
                    <h1>小龙在睡觉</h1>
                </div>
                <div class="swiper-slide" style="background-color: blue">
                    slider2
                </div>
                <div class="swiper-slide">slider3</div>
            </div>
        </div>
    </div>
</template>

<script>
// 使用任何框架 1.js 引用 2.css 的引用
import Swiper from "swiper"
//  这里是单纯引用js
import "swiper/css"

//这里vue文件 所有一般匿名导出是vue 组件   只能写vue 的相关的属性
export default {
    // 任何需要绑定节点的 操作都需要挂载后再进行
    mounted() {
        var myswiper = new Swiper(".swiper-container", {
            autoplay: {
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            }, //可选选项，自动滑动
            loop: true, //可选选项，开启循环
            speed: 2000,
            mode: "vertical",
            effect: "coverflow",
            freeMode: true,
            type: "fraction",
            keyboard: true,
            zoom: true, //开启缩放功能
            on: {
                // touchStart: function () {
                //     alert("事件触发了;")
                // },
            },
        })
        console.log(myswiper)
    },
}
</script>

<style lang="scss" scoped>
.swiper-slide {
    background-color: red;
}
</style>
